<template>
	<view>
		<view class="exchange-point" :style="{ backgroundImage: 'url(' + exchangeBgImage + ')',backgroundColor:exchangeBgColor }">
			<view class="exchange-shop" @click="$util.redirectTo('/promotionpages/point/list/list')">数字资产商城</view>
			<view class="exchange-body" :style="{background:exchangeBodyBg }">
				<view class="exchange-box">
					<input class="exchange-left" placeholder="请输入数字资产兑换码" v-model="point_code" />
					<view class="exchange-right" :style="{background:exchangeBtnBg }" v-if="!token" @click="login">领取</view>
					<view v-else class="exchange-right" :style="{background:exchangeBtnBg }" @click="exchangePoint">领取</view>
				</view>
			</view>
			<image class="exchange-rule" :src="exchangeRuleImage" mode="widthFix"></image>
		</view>
		
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-login ref="login"></ns-login>
	</view>
</template>

<script>
	import globalConfig from '@/common/js/golbalConfig.js';
	export default {
		data() {
			return {
				exchangeBgImage: this.$util.img('upload/uniapp/point/exchange_point_bg.png'),
				exchangeBgColor: '#EE3827',
				exchangeBodyBg: '#FCE4C5',
				exchangeBtnBg: 'linear-gradient(135deg, #FC5014 0%, #FF9939 100%)',
				exchangeRuleImage: this.$util.img('upload/uniapp/point/exchange_point_rule.png'),
				isLogin: false,
				pointData: {},
				token: null,
				isloading: false,
				memberInfo: {
					headimg: ''
				},
				point_code: '',
				type_id: 0
			}
		},
		onLoad(options) {
			if (options.type_id) {
				this.type_id = options.type_id;
			}
		},
		mixins: [globalConfig],
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
			this.$store.dispatch('getAddonIsexit').then(data => {
				if (!data.pointexchange) {
					this.$util.showToast({
						title: '数字资产码未开启',
						mask: true
					});
					setTimeout(() => {
						this.$util.redirectTo('/pages/index/index/index', {}, 'redirectTo');
					}, 1000);
				} else {
					if (uni.getStorageSync('token')) this.getMemberInfo();
					this.getPointType();
				}
			});
		},
		computed: {
			storeToken() {
				return this.$store.state.token;
			}
		},
		watch: {
			storeToken: function(nVal, oVal) {
				if (nVal) {
					this.getMemberInfo();
				}
			}
		},
		methods: {
			//跳转至登录页面
			login() {
				this.$refs.login.open('/promotionpages/point/exchange/exchange?type_id=' + this.type_id);
			},
			getPointType() {
				this.$api.sendRequest({
					url: '/pointexchange/api/exchange_point/getActivity',
					data: {
						exchange_point_type_id: this.type_id
					},
					success: res => {
						if (res.code == 0 && res.data) {
							let data = res.data;
							uni.setNavigationBarTitle({
								title: data.exchange_point_name
							});
							
							this.exchangeBgImage = data.image || this.$util.img('upload/uniapp/point/exchange_point_bg.png');
							this.exchangeBgColor = data.color || '#EE3827';
							this.exchangeBodyBg = data.rule_color || '#FCE4C5';
							this.exchangeBtnBg = data.text_color || 'linear-gradient(135deg, #FC5014 0%, #FF9939 100%)';
							this.exchangeRuleImage = data.rule_image || this.$util.img('upload/uniapp/point/exchange_point_rule.png');
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
						
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail() {
						//联网失败的回调
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			// 领取数字资产
			exchangePoint() {
				if (!this.point_code) {
					return this.$util.showToast({
						title: '请输入数字资产兑换码'
					});
				}
				
				var _this = this;
				this.$api.sendRequest({
					url: '/pointexchange/api/exchange_point/cashAprize',
					data: {
						exchange_point_type_id: this.type_id,
						exchange_point_code: this.point_code
					},
					success: res => {
						if (res.code == 0) {
							uni.showModal({
								title: '提示',
								content: res.data,
								cancelText: '关闭',
								confirmText: '去看看',
								confirmColor: '#ff5041',
								success: res => {
									if (res.confirm) {
										_this.$util.redirectTo('/promotionpages/point/list/list');
									}
								}
							})
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					},
					fail() {
						//联网失败的回调
					}
				});
			},
			getMemberInfo() {
				this.$api.sendRequest({
					url: '/api/member/info',
					success: res => {
						if (res.code >= 0) {
							this.token = uni.getStorageSync('token');
							this.memberInfo = res.data;
						} else {
							this.token = null;
						}
					}
				});
			},
			onShareAppMessage(res) {
				var title = '数字资产大放送，好礼带回家哦';
				var path = '/promotionpages/point/exchange/exchange?type_id=' + this.type_id;
				return {
					title: title,
					path: path,
					success: res => {},
					fail: res => {}
				};
			}
		}
	}
</script>

<style lang="scss">
.exchange-point {
	position: relative;
	width: 750upx;
	min-height: 100vh;
	padding-bottom: 90upx;
	background-size: 750upx 1206upx;
	background-repeat: no-repeat;
	background-position: left top;
	
	.exchange-shop {
		position: absolute;
		top: 36upx;
		right: 0;
		width: 152upx;
		height: 56upx;
		background: linear-gradient(135deg, #FCDB00 0%, #F7B500 100%);
		border-radius: 100upx 2upx 2upx 100upx;
		text-align: center;
		line-height: 56upx;
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #CC6100;
	}
	
	.exchange-body {
		position: absolute;
		top: 525upx;
		left: 32upx;
		width: 686upx;
		height: 172upx;
		// background: #FCE4C5;
		border-radius: 20upx;
		
		.exchange-box {
			margin: 32upx;
			width: 622upx;
			height: 108upx;
			background: #FFFFFF;
			border-radius: 20upx;
			border: 6upx solid #F9B379;
			
			.exchange-left {
				float: left;
				width: 420upx;
				height: 108upx;
				line-height: 108upx;
				padding: 0 20upx;
				font-size: 32upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 46upx;
			}
			.exchange-right {
				float: right;
				width: 128upx;
				height: 108upx;
				line-height: 108upx;
				// background: linear-gradient(135deg, #FC5014 0%, #FF9939 100%);
				box-shadow: 0upx 0upx 50upx 0upx #D80D00;
				border-radius: 0upx 20upx 20upx 0upx;
				border-left: 6upx solid #F9B379;
				text-align: center;
				font-size: 32upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
	
	.exchange-rule {
		margin-top: 729upx;
		margin-left: 32upx;
		width: 686upx;
		height: 478upx;
	}
}
</style>
